import React, {Component} from 'react';
import {Card, Button, Modal} from 'antd';

import './style.less';

class ModalPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showModal1: false,
            showModal2: false,
            showModal3: false,
            showModal4: false,
        }
    }

    render() {
        const {showModal1, showModal2, showModal3, showModal4} = this.state;
        return (
            <div className="pinlor-buttons">
                <Card title="基础模态框" className="pinlor-cards">
                    <Button type="primary" onClick={() => this.handleOpen('showModal1')}>Open</Button>
                    <Button type="primary" onClick={() => this.handleOpen('showModal2')}>自定义页脚</Button>
                    <Button type="primary" onClick={() => this.handleOpen('showModal3')}>距离顶部20px</Button>
                    <Button type="primary" onClick={() => this.handleOpen('showModal4')}>水平垂直居中</Button>
                </Card>
                <Card title="信息确认框" className="pinlor-cards">
                    <Button type="primary" onClick={() => this.handleConfirm('confirm')}>Confirm</Button>
                    <Button type="primary" onClick={() => this.handleConfirm('info')}>Info</Button>
                    <Button type="primary" onClick={() => this.handleConfirm('success')}>success</Button>
                    <Button type="primary" onClick={() => this.handleConfirm('warning')}>warning</Button>
                </Card>
                <Modal
                    title="Pinlor"
                    visible={showModal1}
                    onCancel={() => this.handleCancel('showModal1')}
                    onOk={() => this.handleOk('showModal1')}
                >
                    <p>欢迎登录Pinlor后台管理系统</p>
                </Modal>
                <Modal
                    title="Pinlor"
                    visible={showModal2}
                    okText="下一步"
                    cancelText="算了"
                    onCancel={() => this.handleCancel('showModal2')}
                    onOk={() => this.handleOk('showModal2')}
                >
                    <p>欢迎登录Pinlor后台管理系统</p>
                </Modal>
                <Modal
                    title="Pinlor"
                    visible={showModal3}
                    style={{top: 20}}
                    onCancel={() => this.handleCancel('showModal3')}
                    onOk={() => this.handleOk('showModal3')}
                >
                    <p>欢迎登录Pinlor后台管理系统</p>
                </Modal>
                <Modal
                    title="Pinlor"
                    visible={showModal4}
                    centered
                    onCancel={() => this.handleCancel('showModal4')}
                    onOk={() => this.handleOk('showModal4')}
                >
                    <p>欢迎登录Pinlor后台管理系统</p>
                </Modal>
            </div>
        );
    }

    handleOpen = type => {
        // 打开弹框
        this.setState({
            [type]: true
        })
    };

    handleCancel = type => {
        // 点击弹框的取消按钮
        this.setState({
            [type]: false
        })
    };

    handleOk = type => {
        // 点击弹框的确认按钮
        this.handleCancel(type)
    };

    handleConfirm = type => {
        // 弹出信息框
        Modal[type]({
            title: '确认？',
            content: '你确定你学会react了吗？',
            onOk() {
                console.log('OK');
            },
            onCancel() {
                console.log('cancel');
            }
        })
    }
}

export default ModalPage;
